<template>
    <el-container>
        <el-header class="Header" height="70px"><img src="../../public/logo.png" @click="$router.push('/home')"
                                       style="width: 70px;height: 110%">
            <div class="title" @click="$router.push('/home')">企业员工管理系统</div>
            <div>
                <el-badge :value="200" :max="99" class="item">
                <el-button icon="el-icon-bell" type="text" @click="goChat">&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                </el-badge>
            <el-dropdown class="userInfo" @command="commandHandler">
                <span class="el-dropdown-link" style="color: gold;">
                    {{user.name}}<i><img :src="user.photo" style="margin-bottom: -16px"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                    <el-dropdown-item command="setting">设置</el-dropdown-item>
                    <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div>
        </el-header>

        <el-container>
            <el-aside width="200px" style="height: 980px">
                <el-menu router unique-opened
                         background-color="#1D664F"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         :collapse="isCollapse">
                    <el-submenu :index="index+''" v-for="(item,index) in routes" :key="index" v-if="!item.hidden">
                        <template slot="title">
                            <i :class="item.iconCls" style="color: gold;margin-right: 15px"></i>
                            <span>{{item.name}}</span>
                        </template>

                        <el-menu-item :index="children.path"
                                      v-for="(children,indexj) in item.children" :key="indexj">
                            {{children.name}}
                        </el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>

                <el-main style="background: #c7cfb8;">
                    <el-button @click="toggleCollapse" type="message" icon="el-icon-s-fold"
                               style="margin-bottom: 13px;margin-top: -10px" size="mini" circle></el-button>
                    <el-breadcrumb separator-class="el-icon-caret-right" v-if="this.$router.currentRoute.path!='/home'">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="showHome" v-if="this.$router.currentRoute.path=='/home'">
                        <el-carousel :interval="4000" type="card" height="358px" >
                            <el-carousel-item v-for="item in imgList" :key="item.id">
                                <el-image style="height: 100%" :src="item.idView" class="image" :alt="alt"></el-image>
                            </el-carousel-item>
                        </el-carousel>

                        <div style="display: flex;margin-left: 200px;margin-top: 80px">
                            <i class="fa fa-user-circle-o" style="font-size: 100px;margin-right: 200px;color: #2ad0ff"></i>
                            <i class="fa fa-address-card-o" style="font-size: 100px;margin-right: 200px;color: #11ff49"></i>
                            <i class="fa fa-money" style="font-size: 100px;margin-right: 200px;color: rgba(255,220,14,0.99)"></i>
                            <i class="fa fa-bar-chart" style="font-size: 100px;margin-right: 200px;color: #ff6b48"></i>
                            <i class="fa fa-windows" style="font-size: 100px;color: #f9ffeb"></i>
                        </div>
                        <div style="display: flex;margin-left: 213px;margin-top: 10px">
                            <i style="font-size: 20px;margin-right: 220px;color: #2ad0ff" >员工管理
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefEmp">员工信息</div>
                            </i>
                            <i style="font-size: 20px;margin-right: 208px;color: #11ff49">文件管理
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefFile">文件上传与下载</div>
                            </i>
                            <i style="font-size: 20px;margin-right: 215px;color: rgba(255,220,14,0.99)">薪资管理
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefSalary">薪资账套管理</div>
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefSalSob">员工薪资绑定</div>
                            </i>
                            <i style="font-size: 20px;margin-right: 203px;color: #ff6b48">统计管理
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefAccount">综合信息统计</div>
                            </i>
                            <i style="font-size: 20px;color: #f9ffeb">企业数据与建设
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefBasic">基础信息设置</div>
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefAdmin">操作员管理</div>
                                <div style="margin-top: 8px;color: #2e3238;font-size: 15px" @click="hrefInfo">数据库备份</div>
                            </i>
                        </div>
                    </div>

                    <router-view class="homeView"/>

                    <hr style="display:flex;margin-top: 150px" class="hr0">
                    <marquee><span class="fontL">
                        <i class="fa fa-rocket" aria-hidden="true">&nbsp;欢迎智多薪员工管理系统&nbsp;&nbsp;&nbsp;!</i>
                    </span></marquee>
                </el-main>
                <div style="margin-top: 200px">
                    <el-button @click="drawer = true" size="small"
                               style="height: 200px;width:50px;color: gold;background-color: rgba(214,135,72,0.7)"
                               icon="el-icon-s-unfold" round>
                    </el-button>
                    <el-drawer
                            style="font-size: 30px;background-color: rgba(90,90,85,0.78)"
                            title="快捷栏"
                            :visible.sync="drawer"
                            size="300px">
                        <el-collapse  accordion>
                            <el-collapse-item title="日历" name="1">
                                <el-calendar >
                                </el-calendar>
                            </el-collapse-item>
                            <el-collapse-item title="效率 Efficiency" name="2">
                                <div>简化流程：设计简洁直观的操作流程；</div>
                                <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                                <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                            </el-collapse-item>
                            <el-collapse-item title="评分" class="collapse" name="3">
                            <el-rate style="margin-left: 10px"
                                    v-model="value1"
                                    :colors="['#70b1bf', '#f7e65c', '#ff1e28']"
                                     show-text
                                    >
                            </el-rate>
                            </el-collapse-item>
                            <div class="block" style="margin: 20px">
                                <el-timeline>
                                    <el-timeline-item timestamp="2022/2/22" placement="top">
                                        <el-card>
                                            <h4>更新 GitEE仓库</h4>
                                            <p>系统管理员 提交于 2022/2/22 20:46</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2022/1/4" placement="top">
                                        <el-card>
                                            <h4>更新 员工数据</h4>
                                            <p>系统管理员 提交于 2022/1/4 20:46</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="2021/12/29" placement="top">
                                        <el-card>
                                            <h4>备份 数据库</h4>
                                            <p>系统管理员 提交于 2021/12/29 20:46</p>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-collapse>

                    </el-drawer>
                </div>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import img from '../views/static/1.jpg'
    import img2 from '../views/static/2.jpg'
    import img3 from '../views/static/3.jpg'
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    export default {
        name: "Home",
        components: {ElImageViewer},
        data() {
            return {
              //  user: JSON.parse(window.sessionStorage.getItem('user')),
                value1: null,
                isCollapse: true,
                drawer: false,
                imgList:[
                    {id:0,idView:img},
                    {id:1,idView:img2},
                    {id:2,idView:img3}
                ]
            }
        },
        computed: {
            routes() {
                return this.$store.state.routes;
            },
            user(){
                return this.$store.state.currentAdmin;
            }
        },
        methods: {
            goChat(){
                this.$router.push('/chat');
            },
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            hrefEmp(){
                this.$router.push('/emp/basic');
            },
            hrefFile(){
                this.$router.push('/per/emp');
            },
            hrefSalary(){
                this.$router.push('/sal/sob');
            },
            hrefSalSob(){
                this.$router.push('/sal/sobcfg');
            },
            hrefAccount(){
                this.$router.push('/sta/all');
            },
            hrefBasic(){
                this.$router.push('/sys/basic');
            },
            hrefAdmin(){
                this.$router.push('/sys/admin');
            },
            hrefInfo(){
                this.$router.push('/sys/data');
            },

            commandHandler(command) {
                if (command == 'logout') {
                    this.$confirm('是否注销登录?', '李俊兴是SB', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.postRequest('/logout');
                        window.sessionStorage.removeItem('tokenStr');
                        window.sessionStorage.removeItem('user');
                        this.$store.commit('initRoutes', []);
                        this.$router.replace('/');
                        this.$message({
                            type: 'success',
                            message: '注销成功'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                if (command == 'userInfo'){
                    this.$router.push('/userinfo');
                }
            }
        }
    }
</script>

<style>
    .Header {
        background: #1d664f;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .Header .title {
        margin-right: auto;
        background-image: -webkit-linear-gradient(left, rgba(209, 202, 249, 0.83), #e6fffc 10%, rgba(229, 183, 197, 0.7) 20%, rgba(229, 210, 211, 0.85) 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 80%, white 90%);
        -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
        -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 37px;
    }

    @keyframes masked-animation {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }

    .Header .userInfo {
        cursor: pointer;
    }


    .el-dropdown-link img {
        width: 60px;
        height: 60px;
        border-radius: 24px;
        margin-left: 12px;
    }

    .showHome {
        margin: 0px auto 40px auto;
        font-size: 40px;
        color: gold;
        letter-spacing: 0;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
        text-align: center;
    }

    .homeView {
        margin-top: 20px;
    }

    .item {
        margin-top: 10px;
        margin-right: 40px;
    }

    .hr0{
        height:5px;
        border:none;
        border-top:10px groove #ebe28f;;
    }

    .fontL{
    font-size: 50px;
    color : white;
    text-align: center;
    text-shadow: 0 0 10px #ff4d1e,0 0 20px #ff442e,0 0 30px #ffe5a4,0 0 40px #ff4871;
    }

</style>
